<template>
  <div class="container">
    <!--搜索-->
    <div class="searchContent">
      <searchui :searchFormArr="searchFormArrDetail" @searchParma="searchDetailParma" :isAccording="isAccording" ref="child"></searchui>
    </div>
    <div class="detailTable">
      <tableTemplate :table="table"></tableTemplate>
      <el-pagination
        small
        background
        :current-page="detailPageIndex"
        :page-size="detailPageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="detailTotalPage"
        @current-change="currentChangeDetailHandle"
        @size-change="sizeChangeDetailHandle"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 20px; text-align: right"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { smsTasksInfoApi } from '@/api/message'
export default {
  name: 'smsFlow',
  data() {
    return {
      isAccording: true,
      table: {
        // 数据数组
        Dataorigin: [],
        // 表头数组
        header: [
          { name: '模板ID与名称', prop: 'sms_id' },
          { name: '批次号', prop: 'batch' },
          { name: '用户名称', prop: 'company_boss' },
          { name: '用户号码', prop: 'company_phone' },
          { name: '用户公司', prop: 'company_name' },
          { name: '发送时间', prop: 'send_time' },
          { name: '发送状态', prop: 'resp_sts' },
          { name: '备注', prop: 'message' },
        ],
      },
      searchFormArrDetail: [
        {
          fieldName: '',
          type: 'select',
          field: 'resp_sts',
          option: [
            { id: '1', text: '未发送' },
            { id: '2', text: '成功' },
            { id: '3', text: '失败' },
          ],
          placeholder: '请选择状态',
        },
        {
          fieldName: '',
          type: 'inputSearch',
          field: 'title',
          placeholder: '请输入搜索的用户号码',
        },
      ],
      detailPageIndex: 1,
      detailPageSize: 10,
      detailTotalPage: 0,
      searchDetailParams: {
        title: '',
        resp_sts: '',
      },
    }
  },
  mounted() {
    this.smsTasksInfo()
  },
  methods: {
    smsTasksInfo() {
      const info = Object.assign({ pageNumber: this.detailPageIndex, pageSize: this.detailPageSize }, this.searchDetailParams)
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      smsTasksInfoApi(formData)
        .then((res) => {
          this.table.Dataorigin = res.result.items
          this.table.Dataorigin.forEach((item) => {
            item.resp_sts = item.resp_sts == 1 ? '未发送' : item.resp_sts == 2 ? '成功' : item.resp_sts == 3 ? '失败' : ''
          })
          this.detailTotalPage = res.result.total
        })
        .catch((e) => {
          this.table.Dataorigin = []
          this.detailTotalPage = 0
        })
    },
    // 详情查询
    searchDetailParma(e) {
      if (e.title) {
        this.searchDetailParams.title = e.title
      } else if (e.resp_sts) {
        this.searchDetailParams.resp_sts = e.resp_sts
      } else {
        this.searchDetailParams.title = ''
        this.searchDetailParams.resp_sts = ''
      }
      this.smsTasksInfo()
    },
    // 每页数
    sizeChangeDetailHandle(val) {
      this.detailPageSize = val
      this.detailPageIndex = 1
      this.smsTasksInfo()
    },
    // 当前页
    currentChangeDetailHandle(val) {
      this.detailPageIndex = val
      this.smsTasksInfo()
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  padding: 16px;
  box-sizing: border-box;
  background: #f0f1f4;
  .searchContent {
    width: 100%;
    background: #fff;
    padding: 24px 32px;
    box-sizing: border-box;
  }
  .detailTable {
    margin-top: 20px;
    width: 100%;
    background: #fff;
    padding: 24px 32px;
    box-sizing: border-box;
  }
}
</style>
